<template>
  <div class="detail">
    <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      label-position="right"
      label-width="130px"
    >
      <div class="form-data">
        <el-form-item label="所属快递公司" prop="express_company_id">
          <el-select
            v-model="postForm.express_company_id"
            filterable
            remote
            placeholder="请输入快递公司名称"
            :remote-method="searchExpressCompanyName"
            :loading="searchCompanyLoading"
            style="width: 100%"
          >
            <el-option
              v-for="company_item in expressCompany"
              :key="'company_name_' + company_item.id"
              :label="company_item.code + ' ' + company_item.name"
              :value="company_item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="express_no">
          <el-input
            v-model="postForm.express_no"
            placeholder="物流单号"
            style="width: 100%"
          />
        </el-form-item>
      </div>

      <sticky :class-name="'sub-navbar'">
        <el-button
          v-loading="loading"
          type="success"
          style="margin-left: 10px"
          :disabled="isRefund"
          @click="submitForm"
        >
          发货
        </el-button>
      </sticky>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { getAllExpressCompanyName } from '@/api/shop-express-company'
import { getOrderByID, shopOrderDelivery } from '@/api/order'

export default {
  name: 'OrderDeliveryDetail',
  components: { Sticky },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      isRefund: false,
      expressCompany: [],
      expressCompanyName: '',
      searchCompanyLoading: false,
      postForm: {
        express_company_id: '',
        express_no: ''
      },
      rules: {
        express_company_id: [
          { required: true, message: '所属快递公司不能为空' },
          { type: 'number', message: '所属快递公司格式不正确' }
        ],
        express_no: [
          { required: true, message: '物流单号不能为空' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      if (!this.loading) {
        this.loading = true
        this.$refs.postForm.validate((valid, fields) => {
          // console.log(valid, fields)

          // 判断规则是否验证通过
          if (valid) {
            const delivery = Object.assign({}, this.postForm)
            delivery.id = this.id

            shopOrderDelivery(delivery).then(response => {
              this.$notify({
                title: '成功',
                message: response.msg,
                type: 'success',
                duration: 2000
              })
              this.$emit('ended')
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = false
            for (const key in fields) {
              if (fields.hasOwnProperty(key)) {
                const element = fields[key]
                this.$message({
                  message: element[0].message,
                  type: 'error',
                  duration: 2000
                })
                return false
              }
            }
          }
        })
      }
    },
    getOrderByID() {
      if (this.id !== 0) {
        getOrderByID(this.id).then(response => {
          if (!response.data || response.data.length === 0) {
            return
          }

          // 获取快递公司信息
          this.searchExpressCompanyName('')

          const {
            express
          } = response.data
          this.postForm = {
            express_company_id: express ? express.express_company_id : '',
            express_no: express ? express.express_no : ''
          }
        })
      }
    },
    searchExpressCompanyName(query) {
      this.searchCompanyLoading = true
      getAllExpressCompanyName({
        name: query
      }).then((response) => {
        const { data } = response
        this.expressCompany = data
        this.searchCompanyLoading = false
      }).catch(() => {
        this.expressCompany = []
        this.searchCompanyLoading = false
      })
    },
    toDefault() {
      this.$refs.postForm.resetFields()
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
